<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    input {
      height: 36px;
      line-height: 36px;
      border: 1px solid lightgray;
      color: #666666;
      width: 160px;
      text-indent: 10px;
    }

    button {
      width: 120px;
      height: 36px;
      font-size: 14px;
      text-align: center;
      background: #FF8D28;
      border: none;
      color: #fff;
      border-radius: 3px;
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <input type="text" placeholder="请输入短信验证码" /><button id="count">获取验证码</button>
  <script>
    var _count = document.getElementById("count"); //获取验证码按钮
    var time = 59;
    // 注册单击事件
    _count.addEventListener('click', function () {
      // 禁用按钮
      _count.disabled = true;
      // 开启定时器
      var timer = setInterval(function () {
        // 判断剩余秒数
        if (time == 0) {
          // 清除定时器和复原按钮
          clearInterval(timer);
          _count.disabled = false;
          _count.innerHTML = '获取验证码';
        } else {
          _count.innerHTML = `${time}秒后重新获取`;
          time--;
        }
      }, 1000);
    });
  </script>
</body>

</html>